<template>
  <div class="login-item">
    <div style="background-color: #f6f6f8">
      <AutoComplete
        class="form-input"
        v-model="value.phone"
        :data="autoData"
        @on-blur="onBlur"
        @on-search="onSearch"
        @on-change="onChange"
        placeholder="请输入手机号码"></AutoComplete>

      <div class="role-menu" v-if="showRole" @mouseover="isCustom = true" @mouseleave="isCustom = false">
        <Dropdown trigger="custom" :visible="isCustom" @on-click="menuSelected" placement="bottom-end">
          <span class="role-label">
            <span>{{ curRoleName }}</span>
            <Icon
              v-if="roleList.length > 1"
              color="#C7C7CC"
              type="ios-arrow-down"
              style="margin-top: 5px"></Icon>
          </span>
          <template #list>
            <DropdownMenu>
              <DropdownItem
                v-for="(item, index) in roleList"
                :selected="item.selected"
                :name="item.roleName"
                :key="index">
                <span v-if="ifOneCompany">{{ item.appName }}</span>
                <Icon
                  v-if="ifOneCompany"
                  type="ios-arrow-forward"
                  style="display: flex; align-items: center"
                  size="16" />
                <span>{{ item.roleName }}</span>
              </DropdownItem>
            </DropdownMenu>
          </template>
        </Dropdown>
      </div>
    </div>
  </div>
</template>

<script>
  import loginMgr from '../../biz/index'
  import dt from '@dt/dt'
  import { userStore } from '@/store/user'
  export default {
    props: {
      value: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        curRoleName: '角色',
        showRole: false,
        roleList: [],
        isCustom: false,
        ifOneCompany: false,
        accounts: [],
        autoData: []
      }
    },
    mounted() {
      let accounts = userStore().history.accounts
      this.accounts = accounts || []
    },
    methods: {
      // 监测Input值的变化
      onChange(val) {
        this.roleList = []
        this.value.roleId = ''
        this.showRole = false
        this.$emit('roles', this.roleList)

        let phone = this.value.phone,
          length = phone.length,
          r = /^1[3456789]\d{9}$/
        if (length == 11 && r.test(phone)) {
          this.getRoleList()
        }
      },
      onSearch(value) {
        this.autoData = this.accounts.filter((item) => item.indexOf(value) > -1)
      },
      onBlur() {
        this.$nextTick(() => {
          let phone = this.value.phone,
            length = phone.length,
            r = /^1[3456789]\d{9}$/
          if (!phone) return
          if (length != 11 || !r.test(phone)) {
            dt.ui.Message.error('手机号码有误，请核对')
          }
        })
      },
      // 获取角色列表
      getRoleList() {
        loginMgr.roles(this.value.phone, 1).then((res) => {
          if (res.length > 0) {
            this.roleList = res
            this.showRole = true
            let leng = res.findIndex((re) => re.appId !== res[0].appId)
            this.ifOneCompany = leng > -1 ? true : false
            if (res.length === 1) {
              this.curRoleName = res[0].roleName
              this.value.roleId = res[0].roleId
              this.value.authId = res[0].id
              res[0].selected = true
              userStore().choiceRole(res[0])
            } else {
              this.$nextTick(() => {
                this.isCustom = true
              })
            }
            this.$emit('roles', this.roleList)
          }
        })
      },
      // 角色菜单选中
      menuSelected(mess) {
        this.roleList.forEach((item) => {
          item.selected = item.roleName == mess
          if (item.roleName == mess) {
            this.value.authId = item.id
            this.value.roleId = item.roleId
            this.curRoleName = item.roleName
            userStore().choiceRole(item)
          }
        })
        let arrayList = dt.tool.deepClone(this.roleList)
        this.roleList = []
        this.roleList = arrayList
        this.isCustom = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-item {
    margin-bottom: 5%;

    label {
      color: #333333;
      display: inline-block;
      margin-bottom: 3%;
    }

    div {
      height: 100%;
      display: flex;
      align-items: center;
    }

    .role-menu {
      width: 140px;
      height: 25px;
      line-height: 25px;
      border-left: 1px solid #eee;
      background-color: #f6f6f8;

      :deep(.ivu-dropdown-rel) {
        margin: 0;
        padding: 0 10px 0 16px;
        width: 140px;
      }

      :deep(.ivu-dropdown-item) {
        width: 140px;
      }
    }

    .form-input {
      flex: 1;
    }

    .role-label {
      display: flex;
      justify-content: space-between;
      height: 36px;
      line-height: 36px;
    }
  }

  .login_from_code_span {
    color: #2298ff;
    cursor: pointer;
    padding-right: 10px;
  }

  .login_from_code_span.disabled {
    color: #ccc;
    cursor: no-drop;
  }

  :deep(.ivu-input) {
    height: 50px;
    padding-left: 12px;
    border: none;
    box-shadow: none;
    background-color: #f6f6f8;
  }

  :deep(.ivu-input-suffix) i {
    line-height: 50px;
  }
</style>
